<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/28
  Time: 14:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="/js/vue.js"></script>
    <%--axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--elementui--%>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 必须在引入vue文件后 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="app">
     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
     <div id="main" style="width: 50%;height:400px;float: left"></div>
     <div id="main2" style="width: 50%;height:400px;float: right"></div>

    </div>
</body>
<script type="text/javascript">
     let app=new Vue({
          el:"#app",
          data:{
              zhuData:{},
              pieData:[],
          },
          created(){
              this.loadZhu();
              this.loadPie();
          },
          methods:{
              loadPie(){
                  axios.get("/echarts/pie").then(res=>{
                      this.pieData=res.data.data;
                      var myChart = echarts.init(document.getElementById('main2'));
                      myChart.setOption( {
                          tooltip: {
                              trigger: 'item'
                          },
                          legend: {
                              top: '5%',
                              left: 'center'
                          },
                          series: [
                              {
                                  name: 'Access From',
                                  type: 'pie',
                                  radius: ['40%', '70%'],
                                  avoidLabelOverlap: false,
                                  itemStyle: {
                                      borderRadius: 10,
                                      borderColor: '#fff',
                                      borderWidth: 2
                                  },
                                  label: {
                                      show: false,
                                      position: 'center'
                                  },
                                  emphasis: {
                                      label: {
                                          show: true,
                                          fontSize: 40,
                                          fontWeight: 'bold'
                                      }
                                  },
                                  labelLine: {
                                      show: false
                                  },
                                  data:this.pieData
                              }
                          ]
                      });
                  })
              },
              loadZhu(){
                  axios.get("/echarts/zhu").then(res=>{
                      this.zhuData=res.data.data;
                      var myChart = echarts.init(document.getElementById('main'));
                      myChart.setOption({
                          title: {
                              text: '异步数据加载示例'
                          },
                          tooltip: {},
                          legend: {},
                          xAxis: {
                              data: this.zhuData.categories,
                              axisLabel: {
                                  rotate: 30,  //让文本倾斜
                                  interval: 0,
                                  show: true,
                              },
                          },
                          yAxis: {},
                          series: [
                              {
                                  name: '销量',
                                  type: 'bar',
                                  data: this.zhuData.values
                              }
                          ]
                      });
                  })
              },
          }
     })
</script>
</html>
